<template>
	<view class="sunny-video">
		<video class="video" :style="{height:elVideoHeight.strNum,width:elVideoWidth.strNum}" :id="videoId"
			:ref="videoId" :title="title" :src="src" :show-center-play-btn="false" :controls="controls"
			:enable-play-gesture="enablePlayGesture" @timeupdate="timeupdate" enable-play-gesture
			:show-mute-btn="showMuteBtn" @play="play" @pause="pause" @ended="ended" @error="playError"
			@fullscreenchange="fullscreenchange">

			<cover-view v-if="!isPlay" class="banner-view"
				:style="{height:elVideoHeight.strNum,width:elVideoWidth.strNum}">
				<cover-image class="banner" :style="{height:elVideoHeight.strNum,width:elVideoWidth.strNum}"
					:src="poster" mode="" @click="changePlay"></cover-image>
				<cover-image class="imgPal"
					:style="{left:`${elVideoWidth.intNum/2}px`, width:playBtnHeight.strNum,height:playBtnHeight.strNum,top:`${elVideoHeight.intNum/2}px`,transform:`translate(-${playBtnHeight.intNum/2}px,-${playBtnHeight.intNum/2}px)`}"
					@click="changePlay" :src="playImg"></cover-image>
			</cover-view>

			<cover-view v-if="isPlay&&!isShowRateBox" class="speedText"
				:style="{top:`${isFullScreen?(screenInfo.width/2) - 14.5 +'px':(elVideoHeight.intNum/2)- 14.5+'px'}`}"
				@click="isShowRateBox = true">
				<!-- #ifndef MP-WEIXIN || APP-NVUE -->
				<cover-view class="text" @click="isShowRateBox = true">{{rateText}}X</cover-view>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<text class="text">{{rateText}}X</text>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				{{rateText}}X
				<!-- #endif -->
			</cover-view>

			<cover-view v-if="isFullScreen&&isShowRateBox" class="vertical vertical-full"
				:style="{width:`${screenInfo.height}px`,height:`${isShowRateBox? screenInfo.width : screenInfo.width-40}px`}">
				<!-- #ifdef APP-NVUE -->
				<view class="options"
					:style="{width:`${screenInfo.height - screenInfo.options}px`,height:`${screenInfo.width}px`}"
					@click="isShowRateBox=false"></view>
				<view class="speed-box" :style="{height:`${screenInfo.width}px`}">
					<text class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name"
						@click="changeRate(item,index)">{{item.name}}X</text>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<cover-view class="options"
					:style="{width:`${screenInfo.height - screenInfo.options}px`,height:`${screenInfo.width}px`}"
					@click="isShowRateBox=false"></cover-view>
				<cover-view class="speed-box" :style="{height:`${screenInfo.width}px`}">
					<cover-view class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList"
						:key="item.name" @click="changeRate(item,index)">{{item.name}}X</cover-view>
				</cover-view>
				<!-- #endif -->
			</cover-view>
			<cover-view v-if="!isFullScreen&&isShowRateBox" class="vertical"
				:style="{height:`${isShowRateBox ? elVideoHeight.intNum:elVideoHeight.intNum - 44}px`}">
				<!-- #ifdef APP-NVUE -->
				<view class="options" :style="{height:elVideoHeight.strNum}" @click="isShowRateBox=false"></view>
				<view class="speed-box" :style="{height:elVideoHeight.strNum}">
					<text class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name"
						@click="changeRate(item,index)">{{item.name}}X</text>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<cover-view class="options" :style="{height:elVideoHeight.strNum}"
					@click="isShowRateBox=false"></cover-view>
				<cover-view class="speed-box" :style="{height:elVideoHeight.strNum}">
					<cover-view class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList"
						:key="item.name" @click="changeRate(item,index)">{{item.name}}X</cover-view>
				</cover-view>
				<!-- #endif -->
			</cover-view>
			<cover-view v-if="visibleTrialEndBox" class="trialEndBox" :style="trialStyle">
				<!-- #ifdef APP-NVUE -->
				<text class="tipText">{{tipText}}</text>
				<text class="closeBtn" @click="$emit('handleBtn')">{{btnText}}</text>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<cover-view class="tipText">{{tipText}}</cover-view>
				<cover-view class="closeBtn" @click="$emit('handleBtn')">{{btnText}}</cover-view>
				<!-- #endif -->
			</cover-view>
		</video>
	</view>
</template>

<script>
	import {
		getPx,
		addUnit,
		sys
	} from './function.js'
	export default {
		props: {
			// 视频地址
			src: {
				type: String,
				default: ''
			},
			// 视频标题
			title: {
				type: String,
				default: ''
			},
			// 视频封面
			poster: {
				type: String,
				default: ''
			},
			// 视频高度
			videoHeight: {
				type: [String, Number],
				default: '230px'
			},
			// 视频宽度
			videoWidth: {
				type: [String, Number],
				default: '700rpx'
			},
			// 播放图片按钮宽高
			playImgHeight: {
				type: [String, Number],
				default: '70rpx'
			},
			// 暂停按钮
			playImg: {
				type: String,
				default: () => {
					return require('../../static/play.png')
				}
			},
			// 是否显示静音按钮
			showMuteBtn: {
				type: Boolean,
				default: false
			},
			// 播放完毕是否退出全屏
			isExitFullScreen: {
				type: Boolean,
				default: true
			},
			/**
			 * 主题色
			 */
			primaryColor: {
				type: String,
				default: '#5C91EF'
			},
			/**
			 * 试看提示的文字
			 */
			tipText: {
				type: String,
				default: '试看已结束，本片是会员专享内容'
			},
			/**
			 * 试看按钮的文字
			 */
			btnText: {
				type: String,
				default: '成为会员免费观看'
			},
			// 视频试看时间（秒）
			trialTime: {
				type: Number,
				default: 0
			},
			videoId: {
				type: String,
				default: 'sunnyVideo'
			}
		},
		data() {
			return {
				videoCtx: '', //视频上下文
				isPlay: false, // 视频是否播放过
				isShowRateBox: false, // 是否显示倍速盒子
				rateText: '1.0', // 当前倍速
				rateList: [{
						name: '0.5',
						isTo: false
					}, {
						name: '0.8',
						isTo: false
					}, {
						name: '1.0',
						isTo: true
					}, {
						name: '1.25',
						isTo: false
					}, {
						name: '1.5',
						isTo: false
					}
					// #ifdef MP-WEIXIN
					, {
						name: '2.0',
						isTo: false
					}
					// #endif
				], //倍数
				isFullScreen: false, //全屏状态
				// 屏幕信息
				screenInfo: {
					width: 0,
					height: 0,
					options: getPx('160rpx'), // 遮罩要减去的高度
				},
				visibleTrialEndBox: false, // 控制试看结束内容显示隐藏
				enablePlayGesture: false, // 是否开启播放手势，即双击切换播放/暂停
				controls: false, // 是否显示原生控件
			}
		},
		computed: {
			/**
			 * 视频单位高度信息
			 * @return {Object} {intNum:纯数字，strNum:携带rpx单位}
			 */
			elVideoHeight() {
				return {
					intNum: getPx(this.videoHeight ? this.videoHeight : 230),
					strNum: addUnit(this.videoHeight ? this.videoHeight : 230)
				}
			},
			/**
			 * 视频单位宽度信息
			 * @return {Object} {intNum:纯数字，strNum:携带rpx单位}
			 */
			elVideoWidth() {
				return {
					intNum: getPx(this.videoWidth ? this.videoWidth : 230),
					strNum: addUnit(this.videoWidth ? this.videoWidth : 230)
				}
			},
			/**
			 * 播放图片按钮宽高信息
			 * @returns {Object} { intNum:不带单位, strNum:携带rpx单位 }
			 */
			playBtnHeight() {
				return {
					intNum: getPx(this.playImgHeight ? this.playImgHeight : '70rpx'),
					strNum: addUnit(this.playImgHeight ? this.playImgHeight : '70rpx')
				}
			},
			/**
			 * 试看盒子样式 V1.1.0
			 * @returns {Object} {height,width}
			 */
			trialStyle() {
				return {
					height: this.isFullScreen ? `${this.screenInfo.width}px` : this.elVideoHeight.strNum,
					width: this.isFullScreen ? `${this.screenInfo.height}px` : '750rpx'
				}
			}
		},
		mounted() {
			this.videoCtx = uni.createVideoContext(this.videoId, this)
			this.getScreenInfo()
		},
		methods: {
			// 获取元素信息
			getDomInfo(elId) {
				return new Promise(resolve => {
					const view = uni.createSelectorQuery().select(`#${elId}`)
					view.boundingClientRect(data => {
						resolve(data.height)
					}).exec()
				})
			},
			/**
			 * 当开始/继续播放时触发play事件 - 会触发emit事件
			 * @param {EventHandle} e 
			 */
			play(e) {
				this.isPlay = true
				this.controls = true
				this.enablePlayGesture = true
				this.$emit('play', e)
			},
			// 监听视频暂停
			pause() {
				this.$emit('pause')
			},
			/**
			 * 视频播放出错 - 会触发emit事件
			 * @param {Object} e 错误信息
			 */
			playError(e) {
				this.$emit('playError', e)
			},
			/**
			 * 监听视频结束 - 会触发emit事件
			 */
			ended() {
				this.$emit('videoEnded')
				if (!this.isExitFullScreen) return
				this.videoCtx.exitFullScreen(); //退出全屏
			},
			onBack() {
				uni.navigateBack()
			},
			/**
			 * 视频播放进度变化 - 会触发emit事件
			 * @param {Object} e event.detail = {currentTime, duration}
			 */
			timeupdate(e) {
				this.$emit('timeupdate', e)
				// 是否判断需要视频试看 V1.1.0
				if (this.trialTime <= 0) return
				if (e.detail.currentTime >= this.trialTime) {
					this.$emit('trialEnd')
					this.showTrialEnd()
					this.enablePlayGesture = false
					this.controls = false
				}
			},
			/**
			 * 切换倍速
			 * @param {Object} item 当前点击项
			 * @param {Object} index 倍速索引
			 */
			changeRate(item, index) {
				if (item.isTo) return this.isShowRateBox = false
				this.rateList.forEach((v, i) => {
					i == index ? v.isTo = true : v.isTo = false
				})
				this.videoCtx.playbackRate(item.name * 1)
				this.rateText = item.name
				this.isShowRateBox = false
			},
			/**
			 * 播放视频
			 */
			changePlay() {
				this.$nextTick(() => {
					this.videoCtx.play()
					/* this.rateText ='1.0'
					this.videoCtx.playbackRate(1) */
				})
			},
			/**
			 * 全屏操作 - 会触发emit
			 */
			fullscreenchange() {
				this.isFullScreen = !this.isFullScreen
				this.$emit('fullscreenchange', this.isFullScreen)
			},
			/**
			 * 获取屏幕信息
			 */
			getScreenInfo() {
				const res = sys()
				this.screenInfo.width = res.screenWidth
				this.screenInfo.height = res.screenHeight
			},
			/**
			 * 控制试看模块显示 V1.1.0
			 */
			showTrialEnd() {
				this.visibleTrialEndBox = true
				this.videoCtx.pause()
			},
			/**
			 * 控制试看模块隐藏 V1.1.0
			 */
			closeTrialEnd() {
				this.visibleTrialEndBox = false
				this.changePlay()
			},
			/**
			 * 跳转到指定位置，单位 s
			 * @param {Object} position 
			 * @description V1.1.1
			 */
			seek(position) {
				this.$nextTick(() => {
					this.videoCtx.seek(position)
					uni.showToast({
						title: '已为您跳转至上次观看位置',
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	$primary: #5C91EF;

	.sunny-video {
		position: relative;
		z-index: 0;

		.speedText {
			position: absolute;
			top: 240rpx;
			right: 30rpx;
			z-index: 5;
			padding: 10rpx;
			padding-right: 0;
			font-size: 30rpx;
			color: $primary;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;

			/* #endif */
			.text {
				font-size: 30rpx;
				color: $primary;
			}
		}
	}

	.video {
		width: 750rpx;
		height: 230px;
	}

	.video-view {
		position: absolute;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		/* #ifndef APP-NVUE */
		padding: var(--status-bar-height) 32rpx 0;
		/* #endif */

		.img {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.banner-view {
		position: relative;
		width: 750rpx;
		height: 230px;

		.banner {
			width: 750rpx;
			height: 230px;
		}

		.imgPal {
			position: absolute;
			z-index: 2;
			top: 240rpx;
			left: 375rpx;
			transform: translate(-35rpx, -35rpx);
			width: 70rpx;
			height: 70rpx;
		}
	}

	.vertical {
		position: relative;
		width: 750rpx;
		height: 410rpx;
		/* #ifndef APP-NVUE */
		display: flex;

		/* #endif */
		&.vertical-full {
			position: relative;

			.speed-box {
				padding: 50rpx 0;
			}
		}

		.options {
			width: 590rpx;
		}

		.speed-text {
			position: absolute;
			top: 240rpx;
			right: 30rpx;
			font-size: 30rpx;
			color: #fff;
		}

		.speed-box {
			position: absolute;
			right: 0;
			top: 0;
			width: 160rpx;
			height: 230px;
			/* #ifndef APP-NVUE */
			display: flex;
			box-sizing: border-box;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			padding: 10px 0;
			background-color: rgba(0, 0, 0, 0.7);

			.speeds {
				/* #ifndef APP-NVUE */
				box-sizing: border-box;
				/* #endif */
				width: 160rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				padding: 10px 0px;

				&.act {
					color: $primary;
				}
			}
		}
	}

	// 试看结束盒子
	.trialEndBox {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 999;
		// backdrop-filter: blur(14px);
		background-color: rgba(0, 0, 0, 0.9);

		.tipText {
			font-size: 28rpx;
			color: #fff;
		}

		.closeBtn {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 350rpx;
			height: 75rpx;
			margin: 32rpx 0 0;
			font-size: 30rpx;
			line-height: 75rpx;
			color: #fff;
			text-align: center;
			border-radius: 42rpx;
			background-color: $primary;
		}
	}
</style>